<template>
  <div
    class="immersive-blog-editor"
    :class="{
      fullscreen: safeEditorState.isFullscreen,
      'focus-mode': safeEditorState.isFocusMode,
      'sidebar-hidden': safeEditorState.sidebarCollapsed
    }"
  >
    <!-- 博客设置抽屉组件 -->
    <blog-settings-drawer
      v-model="drawerVisible"
      v-model:blog-info="blogInfo"
      @export="handleExport"
    />

    <!-- 主要内容区域 -->
    <div class="main-content-container">
      <!-- 文章管理侧边栏 -->
      <transition name="sidebar-slide">
        <blog-sidebar
          v-if="!safeEditorState.sidebarCollapsed && !safeEditorState.isFocusMode"
          ref="sidebarRef"
          class="blog-sidebar-component"
          :editor-state="safeEditorState"
          @select-article="handleSelectArticle"
          @create-new-article="handleCreateNewArticle"
          @article-deleted="handleArticleDeleted"
        />
      </transition>

      <!-- 侧边栏切换按钮 -->
      <div
        v-if="!safeEditorState.isFocusMode"
        class="sidebar-toggle-btn"
        :class="{ 'sidebar-hidden': safeEditorState.sidebarCollapsed }"
        @click="toggleSidebar"
      >
        <i
          class="fas"
          :class="safeEditorState.sidebarCollapsed ? 'fa-angle-right' : 'fa-angle-left'"
        />
      </div>

      <!-- 右侧内容区域 -->
      <div class="right-content-area">
        <!-- 顶部工具栏 - 只在有文章时显示 -->
        <blog-toolbar
          v-if="hasArticleSelected"
          v-model:blog-title="blogInfo.blogTitle"
          :show-toolbar="showToolbar"
          :editor-state="safeEditorState"
          :writing-stats="writingStats"
          :has-article="hasArticleSelected"
          @title-focus="onTitleFocus"
          @toggle-focus-mode="toggleFocusMode"
          @toggle-fullscreen="toggleFullscreen"
          @switch-editor-mode="switchEditorMode"
          @save-draft="handleSaveDraft"
          @publish="handlePublish"
          @update:blog-title="handleTitleUpdate"
        />
        <!-- 编辑器区域 -->
        <div class="editor-area">
          <!-- 悬浮设置按钮 -->
          <div
            v-show="!safeEditorState.isFocusMode && hasArticleSelected"
            class="settings-fab"
            @click="drawerVisible = true"
          >
            <i class="fas fa-cog" />
          </div>

          <!-- 主要编辑区域 -->
          <div v-if="hasArticleSelected" class="main-editor-container">
            <!-- 切换文章时的加载动画 -->
            <transition name="article-switch">
              <div v-if="isSwitchingArticle" class="article-loading-overlay">
                <div class="article-loading-content">
                  <div class="loading-spinner">
                    <i class="fas fa-sync-alt fa-spin" />
                  </div>
                  <div class="loading-text">正在加载文章...</div>
                </div>
              </div>
            </transition>

            <!-- Markdown 编辑器 -->
            <div
              v-if="safeEditorState.activeEditor === 'markdown'"
              class="editor-wrapper markdown-editor-wrapper"
            >
              <markdown-editor
                v-model="content"
                :theme="safeEditorState.isFocusMode ? 'dark' : 'light'"
                :focus-mode="safeEditorState.isFocusMode"
                :height="'100%'"
                @change="handleMdChange"
                @save="handleSaveDraft"
              />
            </div>

            <!-- 富文本编辑器 -->
            <div v-else-if="safeEditorState.activeEditor === 'rich'" class="editor-wrapper">
              <wang-edior
                v-model="content"
                :focus-mode="safeEditorState.isFocusMode"
                :is-fullscreen="safeEditorState.isFullscreen"
                :placeholder="getPlaceholder"
                @on-created="handleRichEditorCreated"
                @on-change="handleRichEditorChange"
              />
            </div>
          </div>

          <!-- 空状态 -->
          <div v-else class="empty-editor-state">
            <div class="empty-editor-content">
              <i class="fas fa-file-alt" />
              <h3>选择一篇文章开始编辑</h3>
              <p>从左侧列表中选择一篇文章，或者点击"新建文章"开始创作</p>
              <div class="empty-editor-actions">
                <button class="create-article-btn" @click="showCreateArticleTips">
                  <i class="fas fa-plus" />
                  <span>新建文章</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷键面板组件 -->
    <shortcuts-panel
      :show-shortcuts-panel="shortcutsPanelVisible"
      @close="shortcutsPanelVisible = false"
    />

    <!-- 浮动助手 -->
    <floating-assistant
      :editor-ref="editorRef"
      :editor-type="safeEditorState.activeEditor || 'markdown'"
    />
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// Font Awesome icons will be used directly in template

// 组件导入
import FloatingAssistant from '@/components/Blog/FloatingAssistant.vue';
import MarkdownEditor from '@/components/MarkdownEditor/index.vue';
import WangEdior from '@/components/WangEdior/index.vue';
import { BLOG_STATUS } from '@/constants/common/blog-status';
import BlogSettingsDrawer from './BlogSettingsDrawer.vue';
import BlogSidebar from './BlogSidebar.vue';
import BlogToolbar from './BlogToolbar.vue';
import ShortcutsPanel from './ShortcutsPanel.vue';

// 组合函数
import { useImmersiveEditor } from '@/composables/useImmersiveEditor';
import { useBlogStore } from '@/store/modules/blog';

// API导入
import { getBlogDetail, saveBlogApi } from '@/api/blog';

const router = useRouter();
const route = useRoute();
const blogStore = useBlogStore();

// 定义事件
const emit = defineEmits(['create-new-article']);

// 使用沉浸式编辑器组合函数
const {
  editorRef,
  content: editorContent,
  writingStats,
  toggleFullscreen,
  toggleFocusMode,
  toggleSidebar,
  switchEditorMode,
  saveDraft,
  checkUnsavedChanges,
  handleEditorCreated,
  handleEditorChange
} = useImmersiveEditor();

// 创建本地的响应式内容引用
const content = computed({
  get: () => editorContent.value || '',
  set: (value: string) => {
    editorContent.value = value;
  }
});

// 使用store中的editorState，确保响应式
const safeEditorState = computed(() => blogStore.editorState);

// 本地状态
const drawerVisible = ref(false);
const shortcutsPanelVisible = ref(false);
const showToolbar = ref(true);
const sidebarRef = ref(null);
const isSwitchingArticle = ref(false);
const hasArticleSelected = computed(
  () => !!(blogStore.blogInfo.blogId || blogStore.blogInfo.blogContent)
);

// 计算属性
const blogInfo = computed(() => blogStore.blogInfo);
const getPlaceholder = computed(() =>
  safeEditorState.value.isFocusMode ? '在这里写下你的想法...' : '开始你的创作...'
);

// 方法
const onTitleFocus = () => {
  if (safeEditorState.value.isFocusMode) {
    showToolbar.value = true;
  }
};

const handleTitleUpdate = (newTitle: string) => {
  // 获取当前标题，不要触发内容更新
  blogStore.setBlogInfo({ blogTitle: newTitle });
};

const handleMdChange = (value: string) => {
  content.value = value;

  // 如果有未保存的更改，创建本地备份
  if (blogStore.editorState.hasUnsavedChanges) {
    blogStore.saveLocalBackup();
  }
};

const handleRichEditorCreated = (editor: any) => {
  handleEditorCreated(editor);
};

const handleRichEditorChange = (editor: any) => {
  handleEditorChange(editor);
};

const handleSaveDraft = async () => {
  try {
    // 强制执行保存，不管 hasUnsavedChanges 状态如何
    await saveDraft();
  } catch (error) {
    console.error('保存草稿失败:', error);
  }
};

const handlePublish = async () => {
  if (!blogInfo.value.blogTitle) {
    ElMessage.error('请输入文章标题');
    return;
  }

  if (!blogInfo.value.blogContent || blogInfo.value.blogContent.length < 100) {
    ElMessage.error('文章内容至少需要100字');
    return;
  }

  try {
    await ElMessageBox.confirm('确定发布这篇文章？', '确认发布', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    const response = await saveBlogApi({
      ...blogInfo.value,
      blogStatus: BLOG_STATUS.PUBLISHED
    });

    // 后端会根据blogId判断是新建还是更新
    // 如果是新建操作且返回了新的blogId，更新本地存储
    if (response.data?.blogId && !blogInfo.value.blogId) {
      blogStore.setBlogInfo({
        ...blogInfo.value,
        blogId: response.data.blogId
      });
    }

    blogStore.markAsSaved();
    ElMessage.success('文章发布成功，可以继续编辑');
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('文章发布失败，请检查网络连接');
      console.error('发布失败:', error);
    }
  }
};

const handleExport = () => {
  const blob = new Blob([content.value], { type: 'text/markdown' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = `${blogInfo.value.blogTitle || '未命名文章'}.md`;
  link.click();
  URL.revokeObjectURL(link.href);
  ElMessage.success('导出成功');
};

const showCreateArticleTips = async () => {
  try {
    // 检查是否有未保存的更改
    if (safeEditorState.value.hasUnsavedChanges) {
      await ElMessageBox.confirm('您有未保存的更改，确定要创建新文章吗？', '提示', {
        confirmButtonText: '确定创建',
        cancelButtonText: '取消',
        type: 'warning'
      });
    }

    // 创建新文章本地模板
    await blogStore.initializeNewArticle();

    ElMessage.success('新文章已创建，开始编辑吧');

    // 通知父组件创建新文章
    emit('create-new-article');

    // 新文章没有ID，所以不需要更新侧边栏选中状态
    // 第一次保存后才会有ID，届时侧边栏会自动刷新
  } catch (error) {
    if (error !== 'cancel') {
      console.error('创建新文章失败:', error);
      ElMessage.error('创建新文章失败');
    }
  }
};

// 侧边栏事件处理
const handleSelectArticle = async (article: any) => {
  try {
    // 检查是否有未保存的更改
    if (safeEditorState.value.hasUnsavedChanges) {
      await ElMessageBox.confirm('您有未保存的更改，确定要切换到其他文章吗？', '提示', {
        confirmButtonText: '确定切换',
        cancelButtonText: '取消',
        type: 'warning'
      });
    }

    // 显示加载动画
    isSwitchingArticle.value = true;

    // 加载文章内容
    if (article.blogId) {
      try {
        const res = await getBlogDetail(article.blogId);
        await blogStore.setBlogInfo(res.data, true); // 使用isInitialLoad=true，避免标记为未保存
        blogStore.updateEditorState({ activeEditor: res.data.blogContentType });

        // 更新侧边栏选中的文章ID
        if (sidebarRef.value) {
          sidebarRef.value.setSelectedArticleId(article.blogId);
        }
      } finally {
        // 隐藏加载动画（添加一个短暂的延迟，让用户感知到加载过程）
        setTimeout(() => {
          isSwitchingArticle.value = false;
        }, 300);
      }
    }
  } catch (error) {
    if (error !== 'cancel') {
      isSwitchingArticle.value = false;
      console.error('切换文章失败:', error);
    }
  }
};

const handleCreateNewArticle = async () => {
  try {
    // 显示加载动画
    isSwitchingArticle.value = true;

    // 新文章已经在blogStore中通过initializeNewArticle创建了
    // 这里只需要设置编辑器状态
    blogStore.updateEditorState({ activeEditor: blogStore.blogInfo.blogContentType });

    // 新创建的文章没有ID，所以不需要更新侧边栏选中状态
    // 第一次保存后才会有ID，届时侧边栏会自动刷新

    // 隐藏加载动画
    setTimeout(() => {
      isSwitchingArticle.value = false;
    }, 300);
  } catch (error) {
    if (error !== 'cancel') {
      isSwitchingArticle.value = false;
      console.error('切换到新文章失败:', error);
    }
  }
};

const handleArticleDeleted = (deletedArticleId: string) => {
  // 如果删除的是当前编辑的文章，清空编辑器
  if (blogStore.blogInfo.blogId === deletedArticleId) {
    blogStore.resetBlogState();
    ElMessage.info('当前文章已被删除，编辑器已清空');
  }
};

// 生命周期
onMounted(async () => {
  // 检查是否有文章备份需要恢复
  const restoredFromCache = await blogStore.smartInitializeArticle();

  // 如果恢复了缓存，提示用户
  if (restoredFromCache) {
    ElMessage.info('已恢复上次的编辑内容，可以继续创作');

    // 更新侧边栏选中的文章ID
    if (sidebarRef.value && blogStore.blogInfo.blogId) {
      sidebarRef.value.setSelectedArticleId(blogStore.blogInfo.blogId);
    }
  }
  // 如果没有备份，则不创建新文章，保持空白状态

  // 显示快捷键提示
  setTimeout(() => {
    if (!localStorage.getItem('shortcut-tip-shown')) {
      ElMessage.info('按 Ctrl+/ 查看快捷键');
      localStorage.setItem('shortcut-tip-shown', 'true');
    }
  }, 2000);
});

// 监听全局快捷键
onMounted(() => {
  const handleGlobalKeydown = (event: KeyboardEvent) => {
    // Ctrl + /: 显示快捷键面板
    if ((event.ctrlKey || event.metaKey) && event.key === '/') {
      event.preventDefault();
      shortcutsPanelVisible.value = true;
    }

    // F11: 全屏
    if (event.key === 'F11') {
      event.preventDefault();
      toggleFullscreen();
    }
  };

  document.addEventListener('keydown', handleGlobalKeydown);

  onUnmounted(() => {
    document.removeEventListener('keydown', handleGlobalKeydown);
  });
});

// 防止页面关闭时丢失未保存的内容
// onMounted(() => {
//   const handleBeforeUnload = (e: BeforeUnloadEvent) => {
//     if (safeEditorState.value.hasUnsavedChanges) {
//       // 只提示用户，不自动保存
//       e.preventDefault();
//       e.returnValue = '您有未保存的更改，确定要离开吗？';
//     }
//   };

//   window.addEventListener('beforeunload', handleBeforeUnload);

//   onUnmounted(() => {
//     window.removeEventListener('beforeunload', handleBeforeUnload);
//   });
// });

// 路由守卫：离开页面前的处理
onMounted(() => {
  const beforeRouteLeave = (to: any, from: any, next: any) => {
    if (safeEditorState.value.hasUnsavedChanges) {
      // 有未保存更改，询问用户
      ElMessageBox.confirm('您有未保存的更改，确定要离开吗？', '提示', {
        confirmButtonText: '确定离开',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 用户选择离开，清理缓存并允许跳转
          blogStore.clearCacheOnPageLeave();
          next();
        })
        .catch(() => {
          // 用户取消离开
          next(false);
        });
    } else {
      // 没有未保存的更改，清理缓存并允许跳转
      blogStore.clearCacheOnPageLeave();
      next();
    }
  };

  // 添加路由守卫
  const removeGuard = router.beforeEach((to, from, next) => {
    if (from.path === route.path && to.path !== route.path) {
      beforeRouteLeave(to, from, next);
    } else {
      next();
    }
  });

  onUnmounted(() => {
    removeGuard();
  });
});
</script>

<style scoped lang="scss">
.immersive-blog-editor {
  height: 100%;
  width: 100%;
  position: relative;
  background: transparent;
  overflow: hidden;

  // 主要内容容器
  .main-content-container {
    display: flex;
    height: 100%;

    .blog-sidebar-component {
      flex-shrink: 0;
    }

    // 侧边栏切换按钮
    .sidebar-toggle-btn {
      position: absolute;
      left: 320px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 60px;
      background: white;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 0 16px 16px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 100;

      &:hover {
        background: #f8f9fa;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
      }

      &.sidebar-hidden {
        left: 0;
        border-radius: 0 16px 16px 0;
      }

      i {
        font-size: 18px;
        color: #5f6368;
        transition: all 0.3s ease;
      }

      &:hover i {
        color: #1967d2;
      }
    }

    .right-content-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;

      .editor-area {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
    }
  }

  // 现代化主要编辑区域
  .main-editor-container {
    flex: 1;
    background: linear-gradient(to bottom, #ffffff, #fafbfc);
    min-height: calc(100vh - 128px);

    .editor-wrapper {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;

      /* 编辑器滚动条样式 */
      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
        transition: background 0.2s ease;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
      }
    }

    // Markdown编辑器特殊样式
    .markdown-editor-wrapper {
      height: 100%;
    }

    // 富文本编辑器优化
    .editor-wrapper :deep(.m-wangEditor) {
      border: none;
      border-radius: 0;
      background: transparent;
      height: auto;
      min-height: 100%;
      overflow: visible;
      position: relative;

      .w-e-toolbar {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(250, 251, 252, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 0;
        padding: 12px 24px;
        position: relative;
        z-index: 1001; /* 确保工具栏在内容之上 */

        .w-e-menu-item {
          color: #5f6368;
          border-radius: 6px;
          transition: all 0.2s ease;
          position: relative;

          &:hover {
            background: rgba(0, 0, 0, 0.05);
            color: #202124;
          }

          &.active {
            background: #e8f0fe;
            color: #1967d2;
          }
        }

        // 工具栏下拉菜单层级修复
        .w-e-select-list,
        .w-e-menu-tooltip,
        .w-e-bar-dialog {
          z-index: 1002 !important;
          position: absolute;
        }
      }

      .w-e-text-container {
        background: transparent;
        padding: 0px;
        max-width: none;
        width: 100%;
        height: auto; /* 高度自适应 */
        min-height: 400px; /* 设置最小高度 */
        max-height: calc(100vh - 200px); /* 设置最大高度，考虑工具栏和间距 */
        font-family:
          -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
          sans-serif;
        font-size: 20px;
        line-height: 1.8;
        color: #202124;
        overflow-y: auto; /* 确保可以滚动 */
        // padding-bottom: 60px; /* 底部额外空间 */

        &:focus-within {
          outline: none;
        }

        // 标题样式
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color: #202124;
          font-weight: 600;
          margin: 32px 0 16px 0;
          line-height: 1.3;
        }

        // 段落样式
        p {
          margin: 16px 0;
          line-height: 1.7;
        }

        // 代码块样式
        pre {
          background: #f6f8fa;
          border: 1px solid rgba(0, 0, 0, 0.06);
          border-radius: 12px;
          padding: 20px;
          margin: 24px 0;
          font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
          font-size: 14px;
          line-height: 1.5;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        // 引用样式
        blockquote {
          border-left: 4px solid #1967d2;
          margin: 24px 0;
          padding: 16px 24px;
          background: rgba(25, 103, 210, 0.05);
          border-radius: 0 8px 8px 0;
          color: #5f6368;
          font-style: italic;
        }
      }
    }
  }

  // 空状态编辑器
  .empty-editor-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #ffffff, #fafbfc);

    .empty-editor-content {
      text-align: center;
      max-width: 400px;
      padding: 40px;

      i {
        font-size: 64px;
        color: #9aa0a6;
        margin-bottom: 24px;
        opacity: 0.6;
      }

      h3 {
        font-size: 20px;
        color: #202124;
        margin: 0 0 12px 0;
        font-weight: 500;
      }

      p {
        font-size: 14px;
        color: #5f6368;
        margin: 0 0 32px 0;
        line-height: 1.5;
      }

      .empty-editor-actions {
        .create-article-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 12px 24px;
          background: #1967d2;
          color: white;
          border: none;
          border-radius: 24px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          height: 40px;
          white-space: nowrap;

          &:hover {
            background: #1557b0;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(25, 103, 210, 0.3);
          }

          i {
            font-size: 12px;
            color: white;
            opacity: 1;
            flex-shrink: 0;
            margin: 0;
            padding: 0;
            line-height: 1;
            display: inline-block;
          }

          span {
            line-height: 1;
            display: inline-block;
          }
        }
      }
    }
  }

  // 现代化悬浮设置按钮
  .settings-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    border: 1px solid rgba(0, 0, 0, 0.08);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      background: #f8f9fa;
    }

    &:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    i {
      font-size: 20px;
      color: #5f6368;
      transition: color 0.2s ease;
    }

    &:hover i {
      color: #1967d2;
    }
  }

  // 专注模式
  &.focus-mode {
    .blog-sidebar-component {
      display: none;
    }

    .settings-fab {
      display: none;
    }

    .main-content-container {
      .right-content-area {
        .editor-area {
          background: #fafafa;
        }
      }
    }

    .main-editor-container {
      background: #fafafa;

      .editor-wrapper {
        background: transparent;
      }
    }

    &.fullscreen {
      .main-content-container {
        height: 100vh;
        margin-top: 0;
      }

      .main-editor-container {
        height: 100vh;
      }
    }
  }

  // 保存状态动画
  .save-status-enter-active,
  .save-status-leave-active {
    transition: all 0.2s ease;
  }

  .save-status-enter-from {
    opacity: 0;
    transform: translateX(10px);
  }

  .save-status-leave-to {
    opacity: 0;
    transform: translateX(-10px);
  }

  // 侧边栏滑动动画
  .sidebar-slide-enter-active,
  .sidebar-slide-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar-slide-enter-from {
    transform: translateX(-100%);
    opacity: 0;
  }

  .sidebar-slide-leave-to {
    transform: translateX(-100%);
    opacity: 0;
  }

  // 文章切换加载动画
  .article-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .article-loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      color: #5f6368;

      .loading-spinner {
        i {
          font-size: 24px;
          color: #1967d2;
        }
      }

      .loading-text {
        font-size: 14px;
        font-weight: 500;
        color: #5f6368;
      }
    }
  }

  // 文章切换过渡动画
  .article-switch-enter-active,
  .article-switch-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .article-switch-enter-from {
    opacity: 0;
    transform: translateY(10px);
  }

  .article-switch-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }

  // 动画关键帧
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 响应式设计
  @media (max-width: 1024px) {
    .main-content-container {
      .blog-sidebar-component {
        width: 280px;
      }
    }
  }

  @media (max-width: 768px) {
    .main-content-container {
      .blog-sidebar-component {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1000;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
      }

      .sidebar-toggle-btn {
        left: 216px;
        width: 28px;
        height: 50px;

        &.sidebar-hidden {
          left: 0;
        }

        i {
          font-size: 16px;
        }
      }
    }

    &.sidebar-hidden .main-content-container .blog-sidebar-component {
      transform: translateX(-100%);
    }

    .main-content-container {
      .right-content-area {
        .editor-area {
          .main-editor-container {
            .editor-wrapper {
              overflow-y: auto;
              overflow-x: hidden;

              :deep(.m-wangEditor) {
                .w-e-toolbar {
                  position: relative;
                  z-index: 1001; /* 移动端工具栏层级 */

                  .w-e-select-list,
                  .w-e-menu-tooltip,
                  .w-e-bar-dialog {
                    z-index: 1003 !important; /* 移动端下拉菜单更高层级 */
                    position: absolute;
                  }
                }

                .w-e-text-container {
                  padding: 20px 24px 100px 24px;
                  width: 100%;
                  max-width: none;
                  font-size: 18px;
                  line-height: 1.7;
                  height: auto; /* 高度自适应 */
                  min-height: 300px;
                  max-height: calc(100vh - 150px); /* 设置最大高度 */
                  overflow-y: auto;
                  overflow-x: hidden;
                  position: relative;
                  z-index: 1; /* 文本容器层级较低 */
                }
              }
            }
          }
        }
      }
    }

    .settings-fab {
      position: fixed;
      right: 16px;
      bottom: 16px;
      width: 44px;
      height: 44px;
      z-index: 1000;

      i {
        font-size: 18px;
      }
    }
  }

  @media (max-width: 480px) {
    .main-content-container {
      .blog-sidebar-component {
        width: 100%;
      }

      .sidebar-toggle-btn {
        left: calc(100% - 52px);

        &.sidebar-hidden {
          left: 0;
        }
      }
    }

    .main-content-container {
      .right-content-area {
        .editor-area {
          .main-editor-container {
            .editor-wrapper {
              overflow-y: auto;
              overflow-x: hidden;

              :deep(.m-wangEditor) {
                .w-e-toolbar {
                  position: relative;
                  z-index: 1001; /* 小屏幕工具栏层级 */

                  .w-e-select-list,
                  .w-e-menu-tooltip,
                  .w-e-bar-dialog {
                    z-index: 1004 !important; /* 小屏幕下拉菜单最高层级 */
                    position: absolute;
                  }
                }

                .w-e-text-container {
                  padding: 16px 20px 80px 20px;
                  width: 100%;
                  max-width: none;
                  font-size: 17px;
                  line-height: 1.6;
                  height: auto; /* 高度自适应 */
                  min-height: 250px;
                  max-height: calc(100vh - 120px); /* 设置最大高度 */
                  overflow-y: auto;
                  overflow-x: hidden;
                  position: relative;
                  z-index: 1; /* 文本容器层级较低 */
                }
              }
            }
          }
        }
      }
    }

    .settings-fab {
      position: fixed;
      right: 12px;
      bottom: 12px;
      width: 40px;
      height: 40px;
      z-index: 1000;

      i {
        font-size: 16px;
      }
    }
  }
}
</style>
